<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>JSX的注意</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      function fn() {
        return "hello";
      }

      const name = "孙悟空";

      const div = (
        <div
          id="box"
          onClick={() => {
            alert("哈哈");
          }}
          className="box1"
          style={{ backgroundColor: "yellowgreen", border: "10px red solid" }}
        >
          我是一个div
          <ul>
            <li>列表项</li>
          </ul>
          <input type="text" />
          <div>
            {name} <br />
            {1 + 1} <br />
            {fn()} <br />
            {NaN} <br />
          </div>
        </div>
      );

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(div);
    </script>
  </body>
</html>
